import { ToolBox } from '../../toolbox/ToolBox';
import KeyEvent from '../android/KeyEvent';
import SvgImage from '../../ui/SvgImage';
import { KeyCodeControlMessage } from '../../controlMessage/KeyCodeControlMessage';
import { ToolBoxButton } from '../../toolbox/ToolBoxButton';
import { ToolBoxElement } from '../../toolbox/ToolBoxElement';
import { ToolBoxCheckbox } from '../../toolbox/ToolBoxCheckbox';
import { StreamClientScrcpy } from '../client/StreamClientScrcpy';
import { BasePlayer } from '../../player/BasePlayer';
import { BroadcastService } from '../../interactionHandler/BroadcastService';
import request from '@/utils'
import store from '../../../store'
const BUTTONS = [
	// {
	// 	title: '电源',
	// 	code: KeyEvent.KEYCODE_POWER,
	// 	icon: SvgImage.Icon.POWER,
	// },
	// {
	// 	title: '声音增大',
	// 	code: KeyEvent.KEYCODE_VOLUME_UP,
	// 	icon: SvgImage.Icon.VOLUME_UP,
	// },
	// {
	// 	title: '声音减小',
	// 	code: KeyEvent.KEYCODE_VOLUME_DOWN,
	// 	icon: SvgImage.Icon.VOLUME_DOWN,
	// },
	{
		title: '回退',
		code: KeyEvent.KEYCODE_BACK,
		icon: SvgImage.Icon.BACK,
	},
	{
		title: '主界面',
		code: KeyEvent.KEYCODE_HOME,
		icon: SvgImage.Icon.HOME,
	},
	{
		title: '浏览页',
		code: KeyEvent.KEYCODE_APP_SWITCH,
		icon: SvgImage.Icon.OVERVIEW,
	},
];

export class GoogToolBox extends ToolBox {
	protected constructor(list : ToolBoxElement<any>[]) {
		console.log('lists:',list)
		super(list);
	}

	public static createToolBox(
		udid : string,
		player : BasePlayer,
		client : StreamClientScrcpy,
		moreBox ?: HTMLElement,
	) : GoogToolBox {
		const playerName = player.getName();
		const list = BUTTONS.slice();
		console.log('lists',list)
		const handler = <K extends keyof HTMLElementEventMap, T extends HTMLElement>(
			type : K,
			element : ToolBoxElement<T>,
		) => {
			console.log('optional_code:',element.optional?.code)
			if (!element.optional?.code) {
				return;
			}
			const { code } = element.optional;
			const action = type === 'pointerdown' ? KeyEvent.ACTION_DOWN : KeyEvent.ACTION_UP;
			const event = new KeyCodeControlMessage(action, code, 0, 0);
			console.log('event:',event)
			console.log('client:',client)
			client.sendMessage(event);
		};
		const elements : ToolBoxElement<any>[] = list.map((item) => {
			console.log('ToolBoxElement items:',item)
			const button = new ToolBoxButton(item.title, item.icon, {
				code: item.code,
			});
			//console.log("button:",button)
			button.addEventListener('pointerdown', handler);
			button.addEventListener('pointerup', handler);
			//console.log("button2:",button)
			return button;
		});
		
		return new GoogToolBox(elements);
	}
}